<template>
  <div class="MessageManagement-NoticeEdit height100">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{ title }}</span>
      </div>
      <div class="cr-head-right fs14">
        <el-button type="primary" size="mini" @click="publish">{{
          $t("views.Message.NoticeEdit.51nzt6an7vs0")
        }}</el-button>
      </div>
    </div>
    <div class="content-box bg-white flex1 pt20 pb20">
      <el-form
        :model="form"
        label-width="100px"
        ref="editform"
        class="form-box"
      >
        <el-form-item
          :label="$t('views.Message.NoticeEdit.51nzt6an9a40')"
          prop="title"
          :rules="[
            {
              required: true,
              message: $t('views.Message.NoticeEdit.51nzt6an9m00'),
            },
          ]"
        >
          <el-input
            v-model.trim="form.title"
            clearable
            :placeholder="$t('views.Message.NoticeEdit.51nzt6an9m00')"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('views.Message.NoticeEdit.51nzt6an9wg0')"
          prop="type"
          :rules="[
            {
              required: true,
              message: $t('views.Message.NoticeEdit.51nzt6ana6w0'),
            },
          ]"
        >
          <el-select
            filterable
            clearable
            v-model.trim="form.type"
            :placeholder="$t('views.Message.NoticeEdit.51nzt6ana6w0')"
            style="width: 260px"
          >
            <el-option
              :label="item.noticetype_name"
              :value="item.noticetype_id"
              v-for="item in notice.list"
              :key="item.noticetype_id"
              >{{ item.noticetype_name }}</el-option
            >
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('views.Message.NoticeEdit.51nzt6anai80')"
          prop="content"
          :rules="[
            {
              required: true,
              message: $t('views.Message.NoticeEdit.51nzv6cout00'),
            },
          ]"
        >
          <VueNeditorWrap
            ref="ueditor"
            v-model.trim="form.content"
            :destroy="false"
            :config="config"
            @ready="loadUeditor"
          ></VueNeditorWrap>
        </el-form-item>
        <el-form-item
          :label="$t('views.Message.NoticeEdit.51nzt6anaso0')"
          prop="pic"
          :rules="[
            {
              required: false,
              message: $t('views.Message.NoticeEdit.51nzv6coxp40'),
            },
          ]"
        >
          <el-upload
            class="upload-demo"
            action="http://gmcapi.kidcastle.org/Uploading/File"
            :data="postData"
            :show-file-list="true"
            :on-success="success"
            name="ossfile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="true"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="default">{{
              $t("views.Message.NoticeEdit.51nzt6anb2k0")
            }}</el-button>
          </el-upload>
          <p class="fs12 color-aaa" style="line-height: 21px">
            {{ $t("views.Message.NoticeEdit.51nzt6anbf80") }} 20M以内
          </p>
        </el-form-item>
        <!-- <el-form-item label="选择职务：" prop="workType" :rules="[{ required: true, message: '请选择职务' }]">
          <el-input
            v-model.trim="form.workTypeTxt"
            ref="chooseWorkRange"
            clearable
            @focus="chooseWorkRange"
            :placeholder="$t('views.Message.NoticeEdit.51nzt6anbpg0')"
            style="width:260px"
          ></el-input>
        </el-form-item>-->
      </el-form>
    </div>
    <!-- 选择职务  侧边弹窗---->
    <SliderBox
      :showSliderBox="editWorkVisible"
      width="500px"
      @hideSliderBox="hideworkSliderBox"
    >
      <div class="pop-slider--box">
        <div class="pop-slider--title">
          <a href="javascript:;" class="call fs16 color-333 flex-all">
            <span>
              {{ $t("views.Message.NoticeEdit.51nzt6anbpg0") }}
              <em></em>
            </span>
          </a>
          <div class="flex-al">
            <el-button
              type="primary"
              size="mini"
              @click="editWorkVisible = false"
              >{{ $t("views.Message.NoticeEdit.51nzt6anbz40") }}</el-button
            >
            <span
              class="close ml20 el-icon-close"
              @click="hideworkSliderBox"
            ></span>
          </div>
        </div>
      </div>
      <div class="slider-content pAll20">
        <div class="publish_box">
          <div class="publish_b__lf">
            <p class="p_title">
              {{ $t("views.Message.NoticeEdit.51nzt6anc9c0") }}
            </p>
            <el-checkbox
              :indeterminate="isIndeterminate1"
              v-model="checkWorkAll"
              @change="handlecheckWorkAllChange"
              >{{ $t("views.Message.NoticeEdit.51nzt6anciw0") }}</el-checkbox
            >
            <el-checkbox-group
              v-model="post.workSeled"
              @change="handleCheckWorkAll"
            >
              <el-checkbox
                v-for="(item, index) in post.result"
                :label="item.post_id"
                :key="index"
                >{{ item.post_name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="publish_b__rt">
            <p class="p_title">
              {{ $t("views.Message.NoticeEdit.51nzt6ancwg0") }}
            </p>
            <el-checkbox-group
              v-model="post.workIdSeled"
              @change="handleSchoolSeledChange1"
            >
              <el-checkbox
                v-for="(item, index) in post.workSeledArr"
                :label="item.post_id"
                :key="index"
              >
                <em class="icon mh-zw"></em>
                <span
                  style="
                    max-width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                  >{{ item.post_name }}</span
                >
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </SliderBox>
  </div>
</template>

<script>
import SliderBox from "../../components/SliderBox";
import noticeHttp from "./notice";
import httpApi from "../../utils/http";

// 1、引入VueUeditorWrap组件
import VueNeditorWrap from "vue-neditor-wrap";
export default {
  name: "PersonManage-staffManage",
  components: {
    SliderBox,
    VueNeditorWrap,
  },
  data() {
    return {
      MessageDetail: {},
      title: "", //标题
      editWorkVisible: false, //选择职务
      config: {
        UEDITOR_HOME_URL: "/NEditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "",
        wordCount: false,
        elementPathEnabled: false,
        toolbars: [
          [
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            // "|",
            // "forecolor",
            // "backcolor",
            // "insertorderedlist",
            // "insertunorderedlist",
            // "selectall",
            // "cleardoc",
            // "|",
            // "rowspacingtop",
            // "rowspacingbottom",
            // "lineheight",
            // "|",
            // "customstyle",
            // "paragraph",
            "fontfamily",
            "fontsize",
            // "|",
            // "directionalityltr",
            // "directionalityrtl",
            // "indent",
            // "|",
            // "justifyleft",
            // "justifycenter",
            // "justifyright",
            // "justifyjustify",
            // "|",
            // "touppercase",
            // "tolowercase",
            // "|",
            // "link",
            // "unlink",
            // "anchor"
          ],
        ],
      },
      form: {
        title: "",
        type: "",
        content: "",
        pic: "",
        range: "",
        workType: "",
        workTypeTxt: this.$t("views.Message.NoticeEdit.51nzt6and8w0"),
      },
      notice: {
        list: [],
        id: "",
      },
      fileList: [
        // {
        //   name: "test.png",
        //   url:
        //     "http://kedingdang.oss-cn-shanghai.aliyuncs.com/schoolmanage/201911221703x404382444.png"
        // }
      ],
      postData: {},
      //选择职务*****start
      checkWorkAll: false, //是否全选
      isIndeterminate1: true,
      // 选择职务列表
      post: {
        result: [
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6andk80"),
            post_id: "240",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6andw00"),
            post_id: "241",
          },
          {
            post_name: "ceshi",
            post_id: "250",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6ane5w0"),
            post_id: "279",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6anefc0"),
            post_id: "283",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6anepg0"),
            post_id: "293",
          },
          {
            post_name: "A ",
            post_id: "294",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6anf2o0"),
            post_id: "298",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6anfcw0"),
            post_id: "299",
          },
          {
            post_name: "123453",
            post_id: "302",
          },
          {
            post_name: this.$t("views.Message.NoticeEdit.51nzt6anfo80"),
            post_id: "327",
          },
        ],
        workSeled: [],
        workIdSeled: [],
        workSeledArr: [],
      },
      //选择职务*****end
    };
  },

  created() {
    this.postData = {
      ossfile: "",
      company_id: this.$Tool.getStorage("COMPANY_ID"),
    };
    // this.slider = this.$store.state.Slider;
    // this.form.id = this.$route.query.id;
    // let type = this.$route.query.type;
    // if (type == "campus") {
    //   this.getScNoticeTypeFun();
    //   this.title = "校园通知";
    // } else {
    //   this.getNoticeTypeFun();
    //   this.title = "集团通知";
    // }
    // this.getMessageDetail();
    this.getNoticeTypeList();
    this.form.id = this.$route.query.id;
    this.slider = this.$store.state.Slider;
    let type = this.$route.query.type; //通知类型
    if (type == "campus") {
      this.title = this.$t("views.Message.NoticeEdit.51nzt6anfws0");
    } else {
      this.title = this.$t("views.Message.NoticeEdit.51nzt6ang5g0");
    }
    this.getNewsOneInfoApi();
    // this.editNewsAction()
  },
  watch: {},
  computed: {},
  methods: {
    // 查看阅读详情

    //获取下拉框
    getNoticeTypeList() {
      httpApi
        .getNoticeTypeList({
          noticetype_class: this.$route.query.noticetype_class,
        })
        .then((res) => {
          this.notice.list = res.data.result.list;
        });
    },
    // 编辑消息通知
    editNewsAction() {
      console.log(this.MessageDetail.notice_id, "test1111");
      noticeHttp
        .editNewsAction({
          notice_id: this.form.id,
          notice_title: this.form.title,
          notice_connet: this.form.content,
          noticetype_id: this.form.type,
          notice_filelist: JSON.stringify(this.fileList),
        })
        .then((res) => {
          console.log(res, this.$t("views.Message.NoticeEdit.51nzt6angdw0"));
          this.$message({ message: res.data.errortip, type: "success" });
          this.$router.go(-1);
        });
    },
    getNewsOneInfoApi() {
      const id = this.$route.query.id;
      // const id = (data.notice_id).toString()
      // const id = Number(data.notice_id)
      noticeHttp.getNewsOneInfoApi({ notice_id: id }).then((res) => {
        console.log(res);
        this.MessageDetail = res.data.result.list;
        this.form.type = res.data.result.list.noticetype_id;
        this.form.id = res.data.result.list.notice_id;
        this.form.title = res.data.result.list.notice_title;
        this.form.content = res.data.result.list.notice_connet;
        this.form.pic = res.data.result.list.notice_filelist;
        this.fileList = res.data.result.list.notice_filelist;
      });
    },
    // 页码变化
    curPageChange(v) {
      this.curPage = v;
    },
    // pageSize改变
    pageSizeChange() {
      this.curPage = 1;
    },
    // 重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    // 文件上传******start
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      console.log(fileList);
      const param1 = this.$t("views.Message.NoticeEdit.51nzv6coy980");
      const param2 = this.$t("views.Message.NoticeEdit.51nzv6coyr00");
      const param3 = this.$t("views.Message.NoticeEdit.51nzv6coz8k0");
      this.$message.warning(
        ` ${param1} ${files.length} ${param2} ${files.length} ${param3} `
      );
    },
    beforeRemove(file, fileList) {
      console.log(fileList);
      const param1 = this.$t("views.Message.NoticeEdit.51nzv6cozvo0");
      return this.$confirm(` ${param1} ${file.name}？`);
    },
    success(res, file) {
      console.log(res);
      let fileObj = {};
      if (res.error == 0) {
        this.form.pic = res.result.file_url;
        fileObj.name = file.name;
        fileObj.url = res.result.file_url;
        this.fileList.push(fileObj);
      }
    },
    // 文件上传******end
    // 富文本编辑器
    loadUeditor(p) {
      console.log(p);
    },
    // 选择职务
    chooseWorkRange() {
      this.$refs["chooseWorkRange"].blur();
      this.editWorkVisible = true;
    },
    // 选择职务*****弹框关闭
    hideworkSliderBox() {
      this.editWorkVisible = !this.editWorkVisible;
    },
    // 选择职务****点击全选
    handlecheckWorkAllChange(v) {
      console.log(v);
      let ids = [];
      this.post.result.forEach((e) => {
        ids.push(e.post_id);
      });
      this.post.workSeled = v ? ids : [];

      if (this.post.workSeled.length > 0) {
        this.post.workSeledArr = [].concat(this.post.result);
        this.post.workSeledArr.forEach((e) => {
          this.post.workIdSeled.push(e.post_id);
        });
      } else {
        this.post.workSeledArr = [];
        this.post.workIdSeled = [];
      }
      console.log(this.post.workIdSeled);
      this.form.workType = this.post.workIdSeled;
      this.form.workTypeTxt = `已选择${this.form.workType.length}个职务`;
    },
    // 选择职务****点击未选择的职务选择框
    handleCheckWorkAll(v) {
      let checkedCount = v.length;
      this.checkAll = checkedCount === this.post.result.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.post.result.length;

      let ids = [];
      this.post.result.forEach((e) => {
        ids.push(e.post_id);
      });

      console.log(v);
      if (v.length > 0) {
        this.post.workSeledArr = [];
        this.post.workIdSeled = [];
        this.post.result.forEach((_e1) => {
          // 选中 园所范围
          v.forEach((_e2) => {
            if (_e1.post_id == _e2) {
              this.post.workSeledArr = this.post.workSeledArr.concat(_e1);
            }
          });
        });
        if (this.post.workSeledArr.length > 0) {
          this.post.workSeledArr.forEach((e) => {
            // 选中 园所id
            this.post.workIdSeled.push(e.post_id);
          });
        }
      } else {
        this.post.workSeledArr = [];
        this.post.workIdSeled = [];
      }
      console.log(this.post.workIdSeled);
      this.form.workType = this.post.workIdSeled;
      this.form.workTypeTxt = `已选择${this.form.workType.length}个职务`;
    },
    // 选择职务****点击已选择的职务选择框
    handleSchoolSeledChange1(v) {
      console.log(v, this.post.workIdSeled);
      this.form.workType = this.post.workIdSeled;
      this.form.workTypeTxt = `已选择${this.form.workType.length}个职务`;
    },
    // 修改提交
    publish() {
      this.$refs["editform"].validate((valid) => {
        if (valid) {
          this.editNewsAction();
        } else {
          return false;
        }
      });
    },
    handleClose(done) {
      done();
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 52
        );
      }
    });
  },
};
</script>

<style lang="less">
.MessageManagement-NoticeEdit {
  .form-box {
    width: 80%;
  }
  // 侧边栏样式
  .slider-content {
    padding: 0px;
    height: calc(100% - 50px);
    // 选择职务列表
    .publish_box {
      display: flex;
      height: 100%;
      padding: 0px 20px 0px 20px;
      border-top: 1px solid #ddd;
      height: 100%;
      .p_title {
        padding: 20px 0;
        line-height: 30px;
        font-size: 16px;
        color: #333;
      }
      .publish_b__lf {
        flex: 2;
        border-right: 1px solid #ddd;
        padding-bottom: 20px;
        overflow-y: auto;
        .el-checkbox {
          display: block;
          margin-bottom: 10px;
          & + .el-checkbox {
            margin-left: 0;
          }
        }
      }
      .publish_b__rt {
        flex: 3;
        padding: 0 0 20px 20px;
        .el-checkbox {
          display: flex;
          margin-bottom: 12px;
          align-items: center;
          flex-direction: row-reverse;
          justify-content: space-between;
          margin-right: 0px;
          & + .el-checkbox {
            margin-left: 0;
          }
          .el-checkbox__label {
            padding-left: 0;
            display: flex;
            align-items: center;
            .icon {
              width: 16px;
              height: 12px;
              margin-right: 10px;
              background: url(../../assets/images/icon/p-icon.png) center center
                no-repeat;
            }
          }
        }
      }
      .selected_list {
        .row {
          display: flex;
          margin-bottom: 15px;
          justify-content: space-between;
          align-items: center;
          line-height: 19px;
          font-size: 14px;
          color: #333;
          .conts {
            display: flex;
            align-items: center;
            .icon {
              width: 13px;
              height: 13px;
              margin-right: 5px;
              background-color: green;
            }
          }
          .close {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
